<template>
	<view class="content">
		<f-navbar title="设置店铺活动" fontColor="#333" fontSize="34" bgColor="#fff">
			<view class="u-flex" slot="left">
				<van-icon name="arrow-left" color="#333" size="20" />
			</view>
		</f-navbar>
		<view class="content_box">
			<view class="change_box">
				<view class="change_top" @click="onchangeActivity">
					<view class="change_topL">
						选择店铺活动商品
					</view>
					<view class="change_topR">
						已选择<text class="changenum">{{actnum}}/{{allnum}}件</text>
						<van-icon name="arrow" color="#999" size="16" />
					</view>
				</view>
				<!-- 				<view class="change_top" @click="onchangestoreClass">
					<view class="change_topL">
						店铺活动分类
					</view>
					<view class="change_topR">
						<van-icon name="arrow" color="#999" size="16"/>
					</view>
				</view> -->
			</view>
			<!-- 	<view class="content_top">
				<view class="content_one">
					<view class="content_oneimg">

					</view>
					<view class="content_oneR">
						<view class="content_oneRname">
							2022年时尚百搭卫衣优惠促..
						</view>
						<view class="content_oneRnum">
							<view class="content_oneRnumL">
								剩余库存：200件
							</view>
							<view class="content_oneRnumR">
								已销售20万+
							</view>
						</view>
						<view class="content_oneRprice">
							<view class="content_oneRpriceL">
								原价：78.5
							</view>
							<view class="content_oneRpriceR">
								活动最低价：<text class="price"><text class="price_icon">￥</text>31.60</text>
							</view>
						</view>
					</view>
				</view>
				<view class="guige_box" v-show="iszhankai">
					<view class="guige_title">
						外观/规格
					</view>
					<view class="guige_line">

					</view>

					<view class="guige_content">
						<view class="guige_item guige_item_active">
							黑色外衣 ￥36.4
						</view>
						<view class="guige_item">
							黑色外衣 ￥36.4
						</view>
						<view class="guige_item">
							黑色外衣 ￥36.4
						</view>
						<view class="guige_item">
							黑色外衣 ￥36.4
						</view>


					</view>

				</view>
				<view class="zhankaiiconbox">
					<image v-show="!iszhankai" class="zhankai_icon" @click="oniszhankai"
						:src="imgurl+'zhankai_icon.png'" mode=""></image>
					<image v-show="iszhankai" class="zhankai_icon" @click="onisguanbi" :src="imgurl+'shouqi_icon.png'"
						mode=""></image>
				</view>

			</view>

			<view class="dianpufenlei_box">
				<view class="dianpufenlei_L">
					店铺活动分类
				</view>
				<view class="dianpufenlei_R">
					品类明星 <van-icon name="arrow" color="#999" size="16" />
				</view>
			</view> -->

			<view class="huodongRules_box">
				<view class="huodongRules_box_top">
					活动规则
				</view>
				<view class="huodongRules_input">
					<image class="rules_icon" :src="imgurl+'pingjiaicon.png'" mode=""></image>
					<textarea v-model="rulesvalue" @input="onrules" placeholder-style="color:#BBBBBB" placeholder="请填写您此次活动的规则说明" auto-height/>
				</view>
			</view>




			<view class="huodongtime_box">
				<view class="huodongtime_box_top">
					活动时间设置
				</view>
				<view class="huodong_time">
					<view class="huodong_timestart" @click="onstarttime">
						<view class="startbox_one">
							开始日期
						</view>
						<view class="startbox_two">
							{{startMonth}}
						</view>
						<view class="startbox_three">
							活动时间
						</view>
						<view class="startbox_four">
							{{starthours}}
						</view>
					</view>
					<view class="start_line">

					</view>
					<view class="huodong_timeend" @click="onendtime">
						<view class="endbox_one">
							结束日期
						</view>
						<view class="endbox_two">
							{{endMonth}}
						</view>
						<view class="endbox_three">
							结束时间
						</view>
						<view class="endbox_four">
							{{endhours}}
						</view>
					</view>
					<view class="huodong_timeR">
						共{{timeDifference}}
					</view>
				</view>
			</view>
			<!-- 只显示消费百分比 -->
			<view class="huodong_box" v-if="!isshowjieti">
				<view class="xiaofeibaifenbi_title">
					<image class="xfbfb_icon" :src="imgurl+'xfbfb_leftbottom.png'" mode=""></image>
					<view class="xfbfb_txt">
						{{huodongtitle}}
					</view>
				</view>
				<view class="xfbfb_itembox" v-for="(item,index) in huodongList" :key="index">
					<view class="xfbfb_itembox_top">
						<view class="xfbfb_itemboxL">
							活动{{item.order_num}}：
						</view>
						<view class="xfbfb_itembox_delete" @click="ondeletehuodong(index)">
							删除
						</view>
					</view>
					<view class="xfbfb_item">
						店铺销售额满<input class="xfbfb_num" :data-id="index" @input="oninputnum" :value="item.base_val"
							type="digit">元，消费者可享受每单<input :value="item.ladder_val" :data-id="index" @input="oninputbfb"
							class="xfbfb_num1" type="digit">%优惠
					</view>

				</view>
				<view class="addhuodong_box" @click="addhuodong">
					<van-icon name="add-o" size="20" color="#333" />
					<view class="addhuodong_txt">
						添加新的活动
					</view>
				</view>
			</view>
			<!-- 消费百分比、阶梯价格切换显示 -->
			<view class="huodong_box" v-if="isshowjieti">
				<view class="jieti_titlebox">
					<view class="jieti_titleboxL" @click="jietitoggle('1')">
						<image v-show="isjietitoggle=='1'" class="jieti_icon" :src="imgurl+'jietiicon_right.png'"
							mode=""></image>
						<view class="jieti_txt" :class="isjietitoggle=='1'?'jieti_txt_active':''">
							阶梯价格
						</view>
					</view>
					<view class="jieti_titleboxR" @click="jietitoggle('2')">
						<image v-show="isjietitoggle=='2'" class="jieti_icon" :src="imgurl+'xfbfb_iconleft.png'"
							mode=""></image>
						<view class="jieti_txt1" :class="isjietitoggle=='2'?'jieti_txt_active':''">
							消费百分比
						</view>
					</view>
				</view>
				<!-- 	<view class="xiaofeibaifenbi_title">
				<image class="xfbfb_icon" :src="imgurl+'xfbfb_leftbottom.png'" mode=""></image>
				<view class="xfbfb_txt">
					消费百分比
				</view>
			</view> -->
				<view class="xfbfb_itembox1" v-show="isjietitoggle=='1'">
					<view class="xfbfb_itembox" v-for="(item,index) in jietiList" :key="index">
						<view class="xfbfb_itembox_top">
							<view class="xfbfb_itemboxL">
								活动{{item.orderNum}}：
							</view>
							<view class="xfbfb_itembox_delete" @click="ondeletejieti(index)">
								删除
							</view>
						</view>
						<view class="xfbfb_item">
							店铺销售额满<input class="xfbfb_num" :data-id="item.id" @input="oninputjietinum"
								:value="item.xiaoshounum" type="digit">元，消费者可享受每单<input :value="item.xiaoshoubfb"
								:data-id="item.id" @input="oninputjietibfb" class="xfbfb_num1" type="digit">元优惠
						</view>

					</view>
					<view class="addhuodong_box" @click="addjieti">
						<van-icon name="add-o" size="20" color="#333" />
						<view class="addhuodong_txt">
							添加新的活动
						</view>
					</view>
				</view>
				<view class="xfbfb_itembox1" v-show="isjietitoggle=='2'">
					<view class="xfbfb_itembox" v-for="(item,index) in baifenbiList" :key="index">
						<view class="xfbfb_itembox_top">
							<view class="xfbfb_itemboxL">
								活动{{item.orderNum}}：
							</view>
							<view class="xfbfb_itembox_delete" @click="ondeletebaifenbi(index)">
								删除
							</view>
						</view>
						<view class="xfbfb_item">
							店铺销售额满<input class="xfbfb_num" :data-id="item.id" @input="oninputbaifenbinum"
								:value="item.xiaoshounum" type="digit">件，消费者可享受每单<input :value="item.xiaoshoubfb"
								:data-id="item.id" @input="oninputbaifenbibfb" class="xfbfb_num1" type="digit">%优惠
						</view>

					</view>
					<view class="addhuodong_box" @click="addbaifenbi">
						<van-icon name="add-o" size="20" color="#333" />
						<view class="addhuodong_txt">
							添加新的活动
						</view>
					</view>
				</view>
			</view>


			<view class="bottom">

			</view>
			<view class="bottom_box">
				<view class="bottom_btn" @click="onsubmit">
					保存
				</view>
			</view>



			<!-- 开始时间选择弹窗 -->
			<van-popup :show="isshowstart" position="bottom" custom-style="height: 50%;" @close="onClosestart">
				<van-datetime-picker type="datetime" title="选择开始时间" :value="currentDate" :min-date="minDate"
					:max-date="maxDate" @confirm="onstartconfirm" @cancel="onstartcancel" />
			</van-popup>
			<!-- 结束时间选择弹窗 -->
			<van-popup :show="isshowend" position="bottom" custom-style="height: 50%;" @close="onCloseend">
				<van-datetime-picker type="datetime" title="选择结束时间" :value="currentDateend" :min-date="minDate"
					:max-date="maxDate" @confirm="onendconfirm" @cancel="onendcancel" />
			</van-popup>

		</view>
	</view>
</template>

<script>
	import fNavbar from '@/uni_modules/f-navbar/components/f-navbar/f-navbar.vue';
	import {
		createStoreActivity,
		getStoreActivity
	} from '../../../utils/storeapp.js'
	export default {
		components: {
			fNavbar
		},
		data() {
			return {

				imgurl: getApp().globalData.imgurl,
				iszhankai: false, // 规格是否展开
				isshowstart: false, //开始时间弹窗
				minDate: new Date().getTime(),
				maxDate: new Date(2043, 12, 31).getTime(),
				currentDate: new Date().getTime(),
				isshowend: false,
				currentDateend: new Date().getTime(), // 结束时间
				startTime: null, // 开始时间时间戳
				startMonth: '请选择', // 开始时间月日
				starthours: '请选择', // 开始时间时分
				endMonth: '请选择', //结束时间月日
				endhours: '请选择', //结束时间时分
				timeDifference: '', //时间差
				huodongList: [
					// {id:'1', xiaoshounum:'20',xiaoshoubfb:'30',orderNum:''}
				], // 单个活动消费百分比比数组
				huodongtitle: '消费百分比',
				isshowjieti: false,
				isjietitoggle: '1', // 1阶梯价格、2消费百分比切换
				jietiList: [], // 活动阶梯价格数组
				baifenbiList: [], // 活动百分比数组
				admintoken: uni.getStorageSync('admintoken'),
				allnum: '0', // 总数量
				actnum: '0', // 选中数量
				activity_id: '', // 活动id
				starttime: '', // 开始时间
				endtime: '', // 结束时间
				codeData: '', // code值
				rulesvalue:'', // 活动规则内容
			}
		},
		onLoad(options) {

			// console.log(options);
			// this.codeData = options.codedata
			// this.actnum = options.actnum
			this.getList()

		},
		methods: {
			// 输入活动规则
			onrules(e){
				console.log(e.detail.value);
				this.rulesvalue = e.detail.value
			},
			
			// 获取店铺活动信息数据
			getList() {
				getStoreActivity({
					admin_token: this.admintoken
				}).then(res => {
					console.log(res);
					let starttime = {}
					let endtime = {}
					if (res.data.act_item.start_time) {
						this.starttime = res.data.act_item.start_time
						starttime.detail = new Date(res.data.act_item.start_time).getTime();
						this.onstartconfirm(starttime)
					}
					if (res.data.act_item.end_time) {
						this.endtime = res.data.act_item.end_time
						endtime.detail = new Date(res.data.act_item.end_time).getTime();
						this.onendconfirm(endtime)
					}
					if(res.data.act_item.rules_value){
						this.rulesvalue = res.data.act_item.rules_value
					}
					if (res.data.act_item.s_good_num) {
						this.allnum = res.data.act_item.s_good_num
					}
					if (res.data.act_item.act_good_num) {
						this.actnum = res.data.act_item.act_good_num
					}
					if (res.data.rule_item.rule_txt) {
						this.huodongList = res.data.rule_item.rule_txt
					}
					if (res.data.rule_item.type_txt) {
						this.huodongtitle = res.data.rule_item.type_txt
					}
					if (res.data.act_item.activity_id) {
						this.activity_id = res.data.act_item.activity_id
					}

					// console.log(starttime);



				})
			},
			// a选择店铺分类页面
			onchangestoreClass() {
				uni.navigateTo({
					url: '/pages/subPack/changeStoreclass/changeStoreclass'
				})
			},
			// 选择店铺活动商品
			onchangeActivity() {
				uni.navigateTo({
					url: '/pages/subPack/Activity/Activity?actnum='+this.actnum+'&codeData='+this.codeData
				})
			},


			// 删除活动百分比
			ondeletebaifenbi(e) {
				console.log(e);
				this.baifenbiList.splice(e, 1)
				console.log(this.baifenbiList);
			},
			// 输入百分比
			oninputbaifenbibfb(e) {
				this.baifenbiList[e.currentTarget.dataset.id].xiaoshoubfb = e.detail.value
			},
			// 输入销售数量
			oninputbaifenbinum(e) {
				console.log(e);
				this.baifenbiList[e.currentTarget.dataset.id].xiaoshounum = e.detail.value
			},

			// 添加活动百分比
			addbaifenbi() {
				let obj = {
					id: this.baifenbiList.length,
					xiaoshounum: '',
					xiaoshoubfb: '',
					orderNum: this.baifenbiList.length + 1
				}
				this.baifenbiList.push(obj)
				console.log(this.baifenbiList);
			},


			// 删除活动阶梯价格
			ondeletejieti(e) {
				console.log(e);
				this.jietiList.splice(e, 1)
				console.log(this.jietiList);
			},
			// 输入百分比
			oninputjietibfb(e) {
				this.jietiList[e.currentTarget.dataset.id].xiaoshoubfb = e.detail.value
			},
			// 输入销售数量
			oninputjietinum(e) {
				console.log(e);
				this.jietiList[e.currentTarget.dataset.id].xiaoshounum = e.detail.value
			},

			// 添加活动阶梯价格
			addjieti() {
				let obj = {
					id: this.jietiList.length,
					xiaoshounum: '',
					xiaoshoubfb: '',
					orderNum: this.jietiList.length + 1
				}
				this.jietiList.push(obj)
				console.log(this.jietiList);
			},


			// 阶梯价格消费百分比切换事件
			jietitoggle(e) {
				console.log(e);
				this.isjietitoggle = e
			},
			// 保存事件
			onsubmit() {
				console.log('----'+this.codeData);
				createStoreActivity({
					activity_id: this.activity_id,
					start_time: this.starttime,
					end_time: this.endtime,
					rule: JSON.stringify(this.huodongList),
					code: this.codeData,
					rules_value: this.rulesvalue
				}).then(res => {
					console.log(res);
					if (res.code !== 1) {
						uni.showToast({
							title: res.info,
							icon: 'none',
							duration: 2000
						})
					} else {
						uni.showToast({
							title: res.info,
							icon: 'none',
							duration: 2000
						})
						this.getList()
						var pages = getCurrentPages();
						var prevPage = pages[pages.length - 2]; //上一个页面
						console.log(prevPage);
						// prevPage.setData({
						//      userdata: {
						//        phonenum:this.phonenum
						//      }
						//    })
						// prevPage.$vm.getList()
						uni.navigateBack({ //返回
							delta: 1
						})
					}
				})
			},
			// 删除活动
			ondeletehuodong(e) {
				console.log(e);
				this.huodongList.splice(e, 1)
				console.log(this.huodongList);
			},
			// 输入百分比
			oninputbfb(e) {
				this.huodongList[e.currentTarget.dataset.id].ladder_val = e.detail.value
			},
			// 输入销售数量
			oninputnum(e) {
				console.log(e);
				this.huodongList[e.currentTarget.dataset.id].base_val = e.detail.value
			},
			// 添加新活动
			addhuodong() {
				let obj = {
					base_val: '',
					ladder_val: '',
					order_num: this.huodongList.length + 1
				}
				if (this.huodongList.length < 9) {
					this.huodongList.push(obj)
					console.log(this.huodongList);
				} else {
					uni.showToast({
						title: '最多添加9条',
						icon: 'none',
						duration: 2000
					})
				}


			},
			// 取消结束时间按钮
			onendcancel() {
				this.isshowend = false
			},
			// 结束时间确定按钮
			onendconfirm(e) {
				console.log(e);
				let starttime = this.formatDate(e.detail)
				console.log(starttime);
				this.endtime = starttime
				let data1 = new Date(e.detail)
				this.endMonth = data1.getMonth() + 1 + '月' + data1.getDate() + '日'
				this.endhours = (data1.getHours() < 10 ? '0' + data1.getHours() : data1.getHours()) + ':' + (data1
					.getMinutes() < 10 ? '0' + data1.getMinutes() : data1.getMinutes())
				// console.log(startMonth);
				// console.log(starthours);
				this.isshowend = false
				let a = e.detail - this.startTime
				console.log(a);
				let hours = Math.floor(parseInt(a / 1000 / 3600));

				var leave1 = a % (3600 * 1000);
				// 计算相差分钟数
				var minutes = Math.floor(leave1 / (60 * 1000));
				// let c = Math.abs(parseInt(a / 1000 / 3600)) ;
				this.timeDifference = hours + '小时' + minutes + '分'
				console.log(hours);
				console.log(leave1);
				console.log(minutes);
			},
			// 关闭结束时间选择器
			onCloseend() {
				this.isshowend = false
			},
			// 打开结束时间选择器
			onendtime() {
				if (this.startMonth == '请选择') {
					uni.showToast({
						title: '请选择开始时间'
					})
				} else {
					this.isshowend = true
				}

			},
			// 取消开始时间按钮
			onstartcancel() {
				this.isshowstart = false
			},
			// 开始时间确定按钮
			onstartconfirm(e) {
				this.startTime = e.detail
				let starttime = this.formatDate(e.detail)
				this.starttime = starttime
				let data1 = new Date(e.detail)
				this.startMonth = data1.getMonth() + 1 + '月' + data1.getDate() + '日'
				this.starthours = (data1.getHours() < 10 ? '0' + data1.getHours() : data1.getHours()) + ':' + (data1
					.getMinutes() < 10 ? '0' + data1.getMinutes() : data1.getMinutes())
				// console.log(startMonth);
				// console.log(starthours);
				this.isshowstart = false
			},
			// 关闭开始时间选择器
			onClosestart() {
				this.isshowstart = false
			},
			// 打开开始时间选择器
			onstarttime() {
				this.isshowstart = true
			},
			// 规格展开
			oniszhankai() {
				this.iszhankai = true
			},
			// 规格关闭
			onisguanbi() {
				this.iszhankai = false
			},
			formatDate(date) {
				var date = new Date(date);
				var YY = date.getFullYear() + '-';
				var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
				var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
				return YY + MM + DD + " " + hh + mm + ss;
			},



		},
	}
</script>

<style>
	page {
		background: #eee;
	}

	.change_box {
		width: 690rpx;
		/* height: 106rpx; */
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		padding-bottom: 20rpx;

	}

	.change_top {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 18rpx;
	}

	.change_topL {
		margin-left: 21rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #000033;
	}

	.change_topR {
		margin-right: 20rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		display: flex;
		align-items: center;
	}

	.changenum {
		color: #FF0000;
		margin-right: 8rpx;
	}


	.content_top {
		width: 690rpx;
		/* height: 382rpx; */
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		padding: 21rpx;
		box-sizing: border-box;
	}

	.content_one {
		display: flex;
		align-items: center;
	}

	.content_oneimg {
		width: 120rpx;
		height: 120rpx;
		background: #FF0000;
		border-radius: 10rpx;
	}

	.content_oneR {
		margin-left: 21rpx;
	}

	.content_oneRname {
		width: 360rpx;
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.content_oneRnum {
		width: 520rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.content_oneRnumL {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FF7E00;

	}

	.content_oneRnumR {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #BBBBBB;

	}

	.content_oneRprice {
		width: 520rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.content_oneRpriceL {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
	}

	.content_oneRpriceR {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
	}

	.price {
		font-size: 30rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FF0000;
	}

	.price_icon {
		font-size: 24rpx;
	}

	.guige_box {
		margin-top: 36rpx;
	}

	.guige_title {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		line-height: 40rpx;
	}

	.guige_line {
		width: 645rpx;
		height: 4rpx;
		background: #eee;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	.guige_content {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		overflow: hidden;
	}

	.guige_content_active {
		height: 86rpx;
	}

	.guige_item {
		padding: 13rpx 24rpx;
		/* height: 48rpx; */
		background: #EEEEEE;
		border-radius: 10rpx;
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		/* line-height: 40rpx; */
		box-sizing: border-box;
		margin-right: 38rpx;
		margin-top: 20rpx;
	}

	.guige_item_active {
		background: #FFFFFF;
		border: 1rpx solid #FF0000;
		border-radius: 10rpx;
		padding: 12rpx 24rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FF0000;
		/* line-height: 40rpx; */
	}

	.zhankaiiconbox {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.zhankai_icon {
		width: 30rpx;
		height: 30rpx;
		margin: 0 auto;
		margin-top: 30rpx;
	}

	.dianpufenlei_box {
		width: 690rpx;
		height: 110rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.dianpufenlei_L {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-left: 20rpx;
	}

	.dianpufenlei_R {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-right: 21rpx;
	}

	.huodongRules_box {
		width: 690rpx;
		/* height: 240rpx; */
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		padding-bottom: 30rpx;
	}
	.huodongRules_box_top{
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-left: 20rpx;
		padding-top: 20rpx;
	}
	.huodongRules_input{
		width: 650rpx;
		min-height: 144rpx;
		background: #EEEEEE;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		padding: 20rpx 20rpx 20rpx 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		display: flex;
		align-items: flex-start;
	}
	.rules_icon{
		width: 25rpx;
		height: 25rpx;
		/* background-color: #FF0000; */
		margin-top: 5rpx;
		margin-left: 20rpx;
		margin-right: 22rpx;
	}





	.huodongtime_box {
		width: 690rpx;
		/* height: 287rpx; */
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		padding-bottom: 24rpx;
		box-sizing: border-box;
	}

	.huodongtime_box_top {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-left: 20rpx;
		padding-top: 20rpx;
	}

	.huodong_time {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 30rpx;

	}

	.huodong_timestart {

		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 20rpx;
	}

	.startbox_one {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
	}

	.startbox_two {
		font-size: 34rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-top: 10rpx;
	}

	.startbox_three {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-top: 30rpx;
	}

	.startbox_four {
		font-size: 34rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-top: 10rpx;
	}

	.huodong_timeend {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.endbox_one {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
	}

	.endbox_two {
		font-size: 34rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-top: 10rpx;
	}

	.endbox_three {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-top: 30rpx;
	}

	.endbox_four {
		font-size: 34rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-top: 10rpx;
	}

	.huodong_timeR {
		width: 210rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #EF0E6C;
		margin-right: 20rpx;
		text-align: center;
	}

	.start_line {
		width: 4rpx;
		height: 190rpx;
		background: #BBBBBB;
		/* border-radius: 1rpx; */
	}

	.huodong_box {
		width: 100%;
		/* height: 600rpx; */
		margin-top: 20rpx;
		/* background: #fff; */
	}

	.xiaofeibaifenbi_title {
		width: 209rpx;
		height: 64rpx;
		margin-left: 30rpx;
		position: relative;
	}

	.xfbfb_icon {
		width: 100%;
		height: 100%;
	}

	.xfbfb_txt {
		width: 180rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: 600;
		color: #FFFFFF;
		text-align: center;
		position: absolute;
		top: 50%;
		left: 40%;
		transform: translate(-50%, -50%);
	}

	.xfbfb_itembox {
		width: 690rpx;
		/* height: 120rpx; */
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.xfbfb_itembox_top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 18rpx;
		box-sizing: border-box;
	}

	.xfbfb_itemboxL {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: 700;
		text-decoration: underline;
		line-height: 30rpx;
		color: #333333;
		margin-left: 20rpx;

	}

	.xfbfb_itembox_delete {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #BBBBBB;
		margin-right: 20rpx;
	}

	.xfbfb_item {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-left: 20rpx;
		margin-top: 12rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.xfbfb_num {
		width: 10%;
		border-bottom: 1rpx solid #FF0000;
		text-align: center;
		color: #FF0000;
	}

	.xfbfb_num1 {
		width: 10%;
		border-bottom: 1rpx solid #FF0000;
		text-align: center;
		color: #FF0000;
	}

	.addhuodong_box {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}

	.addhuodong_txt {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-top: 12rpx;
	}

	/* 阶梯价格和消费百分比切换样式 */
	.jieti_titlebox {
		width: 344rpx;
		height: 66rpx;
		border: 2rpx solid #EF0E6C;
		border-radius: 10rpx;
		margin-left: 30rpx;
		position: relative;
	}

	.jieti_titleboxL {
		width: 209rpx;
		height: 64rpx;
		position: absolute;
		left: 0;
		top: 1rpx;
	}

	.jieti_titleboxR {
		width: 209rpx;
		height: 64rpx;
		position: absolute;
		right: 0;
		top: 1rpx;
	}

	.jieti_icon {
		width: 100%;
		height: 100%;
	}

	.jieti_txt {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		text-align: center;
		width: 180rpx;
		text-align: center;
		position: absolute;
		top: 50%;
		left: 40%;
		transform: translate(-50%, -50%);
	}

	.jieti_txt1 {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		text-align: center;
		width: 180rpx;
		text-align: center;
		position: absolute;
		top: 50%;
		right: 0;
		transform: translate(-0, -50%);
	}

	.jieti_txt_active {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: 700;
		color: #FFFFFF;
	}

	.bottom {
		width: 100%;
		height: 98rpx;
	}

	.bottom_box {
		width: 100%;
		height: 98rpx;
		background: #FFFEFE;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 9;
	}

	.bottom_btn {
		width: 154rpx;
		height: 60rpx;
		background: #EF0E6C;
		border-radius: 30rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 60rpx;
		text-align: center;
	}
</style>